<template>
  <div class="list">
    <!-- 选项卡 -->
    <template>
      <el-tabs v-model="param.status" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="all" />
        <el-tab-pane label="待支付订单" name="未付款" />
        <el-tab-pane label="待派单订单" name="待派单" />
        <el-tab-pane label="待服务" name="待服务" />
        <el-tab-pane label="待确认" name="待确认" />
        <el-tab-pane label="已完成" name="已完成" />
      </el-tabs>
    </template>
    <!-- /选项卡 -->
    <!-- 订单列表 -->
    <el-table :data="orders">
      <!-- 折叠列 -->
      <el-table-column type="expand">
        <template v-slot="scope">
          <!-- 订单项表格 -->
          <el-table :data="scope.row.orderLineExtends" size="mini" border>
            <el-table-column label="名称" prop="productName" width="120" />
            <el-table-column label="单价" prop="productPrice" width="60" />
            <el-table-column label="数量" prop="number" width="120" />
            <el-table-column label="介绍" prop="productIntroduce" />
          </el-table>
          <!-- /订单项表格 -->
        </template>
      </el-table-column>
      <el-table-column label="编号" type="index" :index="1" />
      <el-table-column label="下单时间" prop="orderTime" />
      <el-table-column label="总价" prop="total" />
      <el-table-column label="顾客" prop="customer.realname" />
      <el-table-column label="员工" prop="employee.realname" />
      <el-table-column label="状态" prop="status" />
      <el-table-column label="地址" prop="status">
        <template v-slot="scope">
          <div>
            {{ scope.row.address.province +""+scope.row.address.city+""+scope.row.address.area+""+scope.row.address.address }}
          </div>
          <div>
            {{ scope.row.address.username +" " }}{{ scope.row.address.telephone }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template>
          <el-button type="primary" size="mini">派单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { post } from '@/utils/request'
export default {
  data() {
    return {
      param: {
        status: ''
      },
      orders: []
    }
  },
  // watch: {
  //   param: { // 监听param的变化，一旦变化立刻刷新查询
  //     handler: function() {
  //       this.loadOrders()
  //     }
  //   },
  //   deep: true
  // },
  created() {
    this.loadOrders()
  },
  methods: {
    // 加载订单信息
    loadOrders() {
      const url = 'http://120.77.67.62:8888/order/query'
      // 当状态位All,说明查询所有，不需要进行过滤，删除属性即可
      // 1.克隆param
      const param = Object.assign({}, this.param)
      // 处理数据
      if (this.param.status === 'all') {
        delete param.status
      }
      // alert(param.status)
      post(url, param).then((response) => {
        this.orders = response.data
      })
    },
    handleClick() {
      this.loadOrders()
    }
  }
}
</script>
